<script>
import { mapGetters } from 'vuex'

export default {
  name: 'billing',
  data() {
    return {
      /* 计费规则列表分页参数 */
      pageParams: {
        page: 1,
        pageSize: 10
      },
      /* 是否显示添加计费规则或者编辑计费规则的对话框 */
      dialogVisible: false,
      /* 是否是编辑状态 */
      edit: false
    }
  },
  methods: {
    /* 获取计费规则列表的回调函数 */
    async fetchRuleList(pageParams) {
      try {
        await this.$store.dispatch('billingStore/fetchRuleList', pageParams)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 格式化计费方式的回调函数 */
    formatChargeType(type) {
      const TYPEMAP = {
        'duration': '按时长收费',
        'turn': '按次收费',
        'partition': '分段收费'
      }
      return TYPEMAP[type]
    },

    /* 点击删除按钮的回调函数 */
    async handleDelete(row) {
      const confirm = await this.$confirm(`确定删除${row.ruleName}吗?是否继续`, '提示').catch(error => error)
      if (confirm === 'cancel') return
      try {
        const deleteResult = await this.$store.dispatch('billingStore/deleteRule', row.id)
        this.$message.success(deleteResult)
        this.fetchRuleList(this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击添加按钮的回调函数 */
    handleEdit(row) {
      this.dialogVisible = true
      this.edit = true
    },
    /* 点击编辑按钮的回调函数 */
    handleAdd() {
      this.dialogVisible = true
      this.edit = false
    },
    /* 分页器size发生变化的回调函数 */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize
      this.fetchRuleList(this.pageParams)
    },
    /* 分页器page发生变化的回调函数 */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchRuleList(this.pageParams)
    }
  },
  computed: {
    ...mapGetters('billingStore', ['ruleList', 'total']),
    dialogTitle() {
      return this.edit ? '编辑规则' : '添加规则'
    }
  },
  mounted() {
    this.fetchRuleList(this.pageParams)
  }
}
</script>

<template>
  <div class="billing">
    <el-card shadow="never">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加计费规则</el-button>
    </el-card>
    <el-card shadow="never">
      <el-table size="small" border stripe :header-cell-style="{backgroundColor:'#f4f6f8'}" :data="ruleList">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="计费规则编号" prop="ruleNumber" align="center"></el-table-column>
        <el-table-column label="计费规则名称" prop="ruleName" align="center"></el-table-column>
        <el-table-column label="免费时长（分钟）" prop="freeDuration" align="center"></el-table-column>
        <el-table-column label="收费上限（元）" align="center">
          <template #default="{row}"> {{ row.chargeCeiling || '--' }}</template>
        </el-table-column>
        <el-table-column label="计费方式" align="center">
          <template #default="{row}"> {{ formatChargeType(row.chargeType) }}</template>
        </el-table-column>
        <el-table-column label="计费规则" prop="ruleNameView" align="center"></el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <template #default="{row}">
            <el-button type="warning" size="small" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="35%">

    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.billing {
  padding: 10px 0;

  .el-card {
    margin: 10px 0;
  }

  .el-table {
    margin: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
